<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>首页</title>
  <meta http-equiv="Access-Control-Allow-Origin" content="*">
  <link href="/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<!-- 你的 HTML 代码 -->
<!-- 轮播 -->
<div class="layui-carousel" id="test1">
  <div carousel-item>
    <div><img src="/images/img/1.jpg" style="width: 100%; height: 100%;
object-fit: cover;"/></div>
    <div><img src="/images/img/2.jpg" style="width: 100%; height: 100%;
object-fit: cover;"/></div>
    <div><img src="/images/img/3.jpg" style="width: 100%; height: 100%;
object-fit: cover;"/></div>
    <div><img src="/images/img/4.jpg" style="width: 100%; height: 100%;
object-fit: cover;"/></div>
  </div>
</div>
<!-- 手风琴效果展示公告信息 -->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>公告</legend>
</fieldset>
<div class="layui-collapse" lay-accordion="" >
</div>
<script src="/layui/layui.js"></script>
<script>
  layui.use(['carousel','jquery','layer', 'form'], function(){
    var layer = layui.layer;
    var form = layui.form;
    var $ = layui.jquery;
    var carousel = layui.carousel;
//建造实例
    carousel.render({
      elem: '#test1'
      ,width: '100%' //设置容器宽度
      ,height: '380'
      ,arrow: 'always' //始终显示箭头
      ,autoplay: true
//,anim: 'updown' //切换动画方式
  });
    // 调用接口，将公告全部查出
    $.get('/api/announcement', function (res) {
      var html='';
      $.each(res.data, function (i, obj) {
        html += '<div class="layui-colla-item"><h2 class="layui-colla-title">'+obj.title+'<i class="layui-icon layui-colla-icon"> </i></h2> ' +
                '<div class="layui-colla-content layui-show"><p>'+obj.contents+'</p></div></div>';
      });
      $('.layui-collapse').html(html);
      element.render();
    });
    element.on('collapse(test1)', function (data){
      layer.msg('展开状态：'+data.show);
    });
  });
</script>
</body>
</html>